<template>
  <div class="home">
    <div v-if="show">
      <list>
        <list-item v-for="(item,index) in list" :key="index" @click.native="handleOnClick(item)">
          <div class="list-title" slot="title">
            <p>{{item.payproname}}</p>
            <span
              :class="item.begindate | formatDate(item.enddate) | formatTagClass"
            >{{item.begindate | formatDate(item.enddate) | formatTag}}</span>
          </div>
          <desc-tpl slot="content" label="开始时间" :value="item.begindate | formatTime"></desc-tpl>
          <desc-tpl slot="content" label="结束时间" :value="item.enddate | formatTime"></desc-tpl>
          <desc-tpl slot="content" label="门票金额" :value="item.payamt | formatPrice" fashion="stress"></desc-tpl>
        </list-item>
      </list>
      <hover-button></hover-button>
    </div>
    <default-page v-if="empty" text="暂无报名缴费项目"></default-page>
  </div>
</template>
<script>
import { List, ListItem } from '@/components/list';
import HoverButton from '@/components/hoverButton';
import DescTpl from '@/components/desc';
import { generalProcess } from '@/utils/utils';
import DefaultPage from '@/components/defaultPage';
export default {
  name: 'home',
  components: { List, ListItem, HoverButton, DescTpl, DefaultPage },
  data() {
    return {
      list: [],
      show: false,
      empty: false
    }
  },
  created() {
    this._getData();
  },
  activated() {
    document.title = '缴费项目'
  },
  methods: {
    async _getData() {
      let t = this.$toast.loading({ duration: 0 })
      try {
        let res = await this.$http.getProjectListByTxcode({
          txcode: '16'
        })
        if (Array.isArray(res.payprolist)) {
          this.list = res.payprolist;
        }
        this.show = this.list.length > 0;
        this.empty = this.list.length === 0;
        t.clear();
      } catch (error) {
        console.log(error)
      }
    },
    handleOnClick(item) {
      this.$router.push({ path: '/details', query: { id: item.id } });
    }
  }
}
</script>
<style lang="less" scoped>
@import url("../assets/less/base.less");
.home {
  width: 100%;
  height: 100%;
  padding: 0.24rem;
  font-size: 0;
  .list-title {
    display: flex;
    justify-content: space-between;
    .yello,
    .red,
    .gray {
      color: #ffffff;
      font-size: 0.2rem;
      border-radius: 40px 0px 0px 40px;
      padding: 4px 0.16rem;
      text-align: center;
    }
    .yello {
      background-color: #ffdb61;
    }
    .red {
      background-color: #50d887;
    }
    .gray {
      background-color: #b5b5b5;
    }
  }
}
</style>
